<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>随手快递</title>
    <link rel="stylesheet" type="text/css" href="../../AUI/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <style>
        .c-btn{
            display: none;
            position: fixed;
            bottom: 45px;
            text-align: center;
            font-size: 0.7rem;
            right: 0;
            width: 80px;
            color: #fff;
            border-bottom: 1px solid #fff;
            background: rgba(39, 170, 158, 0.85);
        }
        .amap-geo{
            display: none;
        }
    </style>
</head>
<body style="overflow-x: hidden">
<header class="aui-bar aui-bar-nav" id="aui-header" style="z-index: 999">
    <a class="aui-btn aui-pull-left" tapmode onclick="history.back();">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">订单详情</div>
</header>
<div id="container" style="height: 250px;margin-top: 48px"></div>
<div id="panel" style="display:none;"></div>
<div id="tip" style="display:none;"></div>
<section class="aui-content" style="margin-top: 300px">
    <div class="aui-card-list">
        <div class="aui-card-list-content-padded">
            <div class="aui-border-b aui-padded-b-10"><span style="margin-left: 10px">起点</span>
                <span style="float: right" id="purchaseAddress"></span>
            </div>
            <div class="aui-border-b aui-padded-b-10 aui-padded-t-10"><span style="margin-left: 10px">寄件人</span>
                <span style="float: right" id="purchaseName"></span>
            </div>
            <div class="aui-border-b aui-padded-b-10 aui-padded-t-10"><span style="margin-left: 10px">联系方式</span>
                <span style="float: right;color: #1d46ff"><span class="fa fa-phone" ></span> <span id="purchasePhone"></span></span>
            </div>
            <div class="aui-border-b aui-padded-b-10 aui-padded-t-10" style="height:66px"><span style="margin-left: 10px">终点</span>
                <span style="float: right" id="address"></span><br>
                <span style="float: right" id="addressDetails"></span>
            </div>
            <div class="aui-border-b aui-padded-b-10 aui-padded-t-10" ><span style="margin-left: 10px">收件人</span>
                <span style="float: right" id="contacts"></span>
            </div>
            <div class=" aui-padded-b-10 aui-padded-t-10"><span style="margin-left: 10px">联系方式</span>
                <span style="float: right;color: #1d46ff"><span class="fa fa-phone" ></span> <span id="contactsPhone"></span></span>
            </div>
        </div>
    </div>
</section>
<section class="aui-content">
    <div class="aui-card-list">
        <div class="aui-card-list-content-padded">
        <div class="aui-border-b aui-padded-b-10 aui-padded-t-10"><span style="margin-left: 10px">下单时间</span>
            <span style="float: right" id="demandCreatetime"></span>
        </div>
        <div class=" aui-padded-b-10 aui-padded-t-10" ><span style="margin-left: 10px">送达时间</span>
            <span style="float: right" id="arriveTime"></span>
        </div>
        </div>
    </div>
</section>
<section class="aui-content" style="margin-bottom: 55px">
    <div class="aui-card-list">
        <div class="aui-card-list-content-padded">
            <div  class="aui-border-b aui-padded-b-10 aui-padded-t-10"><span style="margin-left: 10px">快递费</span>
                <span style="float: right" id="courierFees">10</span>
            </div>
            <div  class=" aui-padded-b-10 aui-padded-t-10"><span style="margin-left: 10px">备注</span>
                <span style="float: right" id="note"></span>
            </div>
        </div>
    </div>
</section>
<section class="aui-bar aui-bar-tab" >
 <div style="border-top:1px solid #ddd;background: #FFF;height: 45px">
     <div id="close" style="float: left;line-height: 45px;font-size: 15px;margin-left: 20px">当前状态：<span style="color:#ff9a07" id="state"></span></div>
     <div style="float: right"><div class="aui-btn" style="height: 45px;line-height: 45px;border-radius:0;background: #27AA9E;color: #fff" id="change">更改状态</div></div>
 </div>
</section>
<div class="c-btn">
    <div style="padding: 5px 0;border-bottom:1px solid #fff" id="over">已完成</div>
    <div style="padding: 5px 0" id="send">派送中</div>
</div>
<script type="text/javascript" src="../../AUI/script/api.js" ></script>
<script src="../../myJs/jquery.js"></script>
<script src="../../myJs/jquery.cookie.js"></script>
<script type="text/javascript" src="../../myJs/index.js" ></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=a37424dd342449fb8ab5f809081e01ce&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Riding"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript">


    /* var data = {
        "code":"200",
        "msg":
            {
                "orderId": "1",
                "note": "请最帅的小哥哥接单",
                "purchaseAddress": "物美超市",
                "address": "江干区白杨街道",
                "addressDetails":"文泽路四号大街五号路口",
                "demandCreatetime": "11：12",
                "courierFees":"20元",
                "contacts":"summery",
                "contactsPhone":"13748372637",
                "purchaseName":"小姐姐啊",
                "purchasePhone":"18372837463",
                "arriveTime":"订单未完成",
                "addressLongitude":120.195309,
                "addressLatitude":30.270883,
                "purchaseLongitude":120.391628,
                "purchaseLatitude":30.312482,
            }

    } */
    var orderId;
    var addressLongitude,addressLatitude,purchaseLatitude,purchaseLongitud;
    $(function(){
        orderId = sessionStorage.getItem("orderId");
        //alert(orderId);
         $.ajax({
         type: "post",
         url: '/randomdelivery/userCourierManageController/courierOrderMessage',
         data: {
         "orderId": orderId
         },
         datatype: "json",
         success: function (data) {
        	// alert(JSON.stringify(data));
        	 viewDetail(data);
         }

         });
        
    });

    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [120.207134,30.259588],//地图中心点
        zoom: 13 //地图显示的缩放级别
    });
    map.plugin('AMap.Geolocation', function() {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: false,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition:'RB'
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });
    //解析定位结果
    function onComplete(data) {
        var str=['定位成功'];
        str.push('经度：' + data.position.getLng());
        str.push('纬度：' + data.position.getLat());
        if(data.accuracy){
            str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        document.getElementById('tip').innerHTML = str.join('<br>');
    }
    //解析定位错误信息
    function onError(data) {
        document.getElementById('tip').innerHTML = '定位失败';
    }
    //骑行导航
    var riding = new AMap.Riding({
        map: map,
        panel: "panel"
    });
    //根据起终点坐标规划骑行路线

    function viewDetail(data){
        var data = data.msg;
        if(data.orderCourierState==0){
        	$("#state").html("待取件");
        }else if(data.orderCourierState==1){
        	$("#state").html("派送中");
        }else if(data.orderCourierState==2){
        	$("#state").html("已完成");
        }
        $("#note").html(data.purchaseNote);
        $("#purchaseName").html(data.purchaseName);
        $("#purchaseAddress").html(data.purchaseAddress);
        $("#address").html(data.address);
        $("#addressDetails").html(data.addressDetails);
        $("#demandCreatetime").html(data.demandCreatetime);
        $("#courierFees").html(data.courierFees);
        $("#contacts").html(data.contacts);
        $("#contactsPhone").html(data.contactsPhone);
        $("#purchasePhone").html(data.purchasePhone);
        $("#arriveTime").html(data.arriveTime);
        riding.search([data.purchaseLongitude,data.purchaseLatitude],[data.addressLongitude,data.addressLatitude]);
    }
    apiready = function(){
        api.parseTapmode();
    }
</script>
<script>
    $("#change").on("click",function(){
        $(".c-btn").css("display","block");
    })
    $("#over").on("click",function(){
        var orderCourierState = "已完成";
          $.ajax({
         type: "post",
         url: '/randomdelivery/userCourierManageController/courierChangeState',
         data: {
         "orderId": orderId,
         "orderCourierState":2
         },
         datatype: "json",
         success: function (data) {
        	 alert(JSON.stringify(data));
         /* $(".c-btn").css("display","none");
         $("#state").html("已完成"); */
        	 location.reload();
         }

         });
        /* $(".c-btn").css("display","none");
        $("#state").html("已完成"); */
    })
    $("#send").on("click",function(){
        var orderCourierState = "派送中";
         $.ajax({
         type: "post",
         url: '/randomdelivery/userCourierManageController/courierChangeState',
         data: {
         "orderId": orderId,
         "orderCourierState":1
         },
         datatype: "json",
         success: function (data) {
        	 alert(JSON.stringify(data));
         /* $(".c-btn").css("display","none");
         $("#state").html("派送中"); */
         location.reload();
         }

         });
       /*  $(".c-btn").css("display","none");
        $("#state").html("派送中"); */
    })
    $("#close").on("click",function(){
        $(".c-btn").css("display","none");
    })
</script>
</body>
</html>